<template>
  <div>
     <li>
       <input type="checkbox" :checked='todo.done' @change="handleCheck(todo.id)">{{todo.title}}
     <!-- <button class="delete" @click="handleDelete(todo.id)">删除</button> -->
     <el-button type="primary"  class="delete"  @click="handleDelete(todo.id)">删除</el-button>
     </li>
  </div>
</template>

<script>
export default {
    name:'NoteItem',
    props:['todo'],
    methods: {
      handleCheck(id){
        this.$bus.$emit('checkTodo',id)
      },
      handleDelete(id){
				if(confirm('确定删除吗？')){
					this.$bus.$emit('deleteTodo',id)
				}
			}
    },
}
</script>

<style scpoed>
 li{
   width: 500px;
   height: 50px;
   border: 1px solid #ccc;
   line-height: 50px;
   list-style: none;
 }
 li:hover{
   background-color: rgb(197, 193, 193);
 }
 li:hover .delete {
   display: block;
 }
 .delete {
   width: 80px;
   height: 40px;
   display: none;
   float: right;
   margin-top: 8px;
   margin-right: 10px;
  background-color: #f56c6c;

 }
 .delete:hover {
   background-color: #f56c6c;
 }
</style>